import React, { useState, useEffect } from 'react';
import { Button } from 'antd-mobile';

const QQLoginTest: React.FC = () => {
    const [qqStatus, setQqStatus] = useState<'logged_in' | 'logged_out'>('logged_out');
    const [detectionResult, setDetectionResult] = useState<string>('');

    // 模拟QQ登录状态检测
    const detectQQStatus = () => {
        const results = [];

        // 检查localStorage
        const qqLoginStatus = localStorage.getItem('qq_login_status');
        results.push(`localStorage状态: ${qqLoginStatus || '未设置'}`);

        // 检查QQ进程检测
        const qqProcessCheck = localStorage.getItem('qq_process_detected');
        results.push(`QQ进程检测: ${qqProcessCheck || '未设置'}`);

        // 检查QQ登录历史
        const qqLoginHistory = localStorage.getItem('qq_login_history');
        if (qqLoginHistory) {
            const lastLoginTime = new Date(parseInt(qqLoginHistory));
            results.push(`最后登录时间: ${lastLoginTime.toLocaleString()}`);
        } else {
            results.push('QQ登录历史: 无记录');
        }

        // 检查QQ相关cookie
        const qqCookies = document.cookie.split(';').filter(cookie =>
            cookie.trim().toLowerCase().includes('qq') ||
            cookie.trim().toLowerCase().includes('tencent')
        );
        results.push(`QQ相关Cookie: ${qqCookies.length}个`);

        setDetectionResult(results.join('\n'));
    };

    const setQQLoggedIn = () => {
        localStorage.setItem('qq_login_status', 'logged_in');
        localStorage.setItem('qq_process_detected', 'true');
        localStorage.setItem('qq_login_history', Date.now().toString());
        setQqStatus('logged_in');
        alert('QQ已设置为登录状态');
        detectQQStatus();
    };

    const setQQLoggedOut = () => {
        localStorage.setItem('qq_login_status', 'logged_out');
        localStorage.removeItem('qq_process_detected');
        localStorage.removeItem('qq_login_history');
        setQqStatus('logged_out');
        alert('QQ已设置为未登录状态');
        detectQQStatus();
    };

    const clearAllTokens = () => {
        localStorage.removeItem('token');
        localStorage.removeItem('login_type');
        localStorage.removeItem('qq_login_status');
        localStorage.removeItem('qq_process_detected');
        localStorage.removeItem('qq_login_history');
        alert('已清除所有登录状态');
        detectQQStatus();
    };

    const simulateQQProcess = () => {
        localStorage.setItem('qq_process_detected', 'true');
        localStorage.setItem('qq_login_history', Date.now().toString());
        alert('已模拟QQ进程运行状态');
        detectQQStatus();
    };

    const simulateQQCookie = () => {
        // 模拟设置QQ相关cookie
        document.cookie = 'qq_session=test_session; path=/';
        document.cookie = 'tencent_user=test_user; path=/';
        alert('已模拟QQ相关Cookie');
        detectQQStatus();
    };

    useEffect(() => {
        detectQQStatus();
    }, []);

    return (
        <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
            <h2>QQ登录测试工具</h2>

            <div style={{ marginBottom: '20px' }}>
                <p>当前QQ状态: <strong>{qqStatus === 'logged_in' ? '已登录' : '未登录'}</strong></p>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '20px' }}>
                <Button
                    onClick={setQQLoggedIn}
                    style={{ backgroundColor: '#12B7F5', color: 'white' }}
                >
                    模拟QQ已登录（完整状态）
                </Button>

                <Button
                    onClick={setQQLoggedOut}
                    style={{ backgroundColor: '#ff4d4f', color: 'white' }}
                >
                    模拟QQ未登录
                </Button>

                <Button
                    onClick={simulateQQProcess}
                    style={{ backgroundColor: '#52c41a', color: 'white' }}
                >
                    模拟QQ进程运行
                </Button>

                <Button
                    onClick={simulateQQCookie}
                    style={{ backgroundColor: '#faad14', color: 'white' }}
                >
                    模拟QQ Cookie
                </Button>

                <Button
                    onClick={clearAllTokens}
                    style={{ backgroundColor: '#722ed1', color: 'white' }}
                >
                    清除所有登录状态
                </Button>
            </div>

            <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
                <h4>检测结果：</h4>
                <pre style={{
                    backgroundColor: '#fff',
                    padding: '10px',
                    borderRadius: '4px',
                    fontSize: '12px',
                    whiteSpace: 'pre-wrap',
                    wordBreak: 'break-all'
                }}>
                    {detectionResult}
                </pre>
            </div>

            <div style={{ marginTop: '30px', padding: '15px', backgroundColor: '#e6f7ff', borderRadius: '8px' }}>
                <h4>使用说明：</h4>
                <ul style={{ textAlign: 'left' }}>
                    <li><strong>模拟QQ已登录</strong>：设置完整的QQ登录状态，包括进程检测和登录历史</li>
                    <li><strong>模拟QQ进程运行</strong>：仅设置QQ进程检测状态</li>
                    <li><strong>模拟QQ Cookie</strong>：设置QQ相关的Cookie</li>
                    <li><strong>检测结果</strong>：显示当前所有QQ相关的检测状态</li>
                    <li>设置完成后，返回登录页面点击QQ登录测试不同状态</li>
                </ul>
            </div>
        </div>
    );
};

export default QQLoginTest; 